import { Component, OnInit, Input, Output, EventEmitter,OnChanges } from '@angular/core';

@Component({
  selector: 'app-stars',
  templateUrl: './stars.component.html',
  styleUrls: ['./stars.component.css']
})
export class StarsComponent implements OnInit,OnChanges {

  //评分星级的具体分数(该值被input修饰器装饰，需要在父级组件中传入)
  //<app-stars [rating]="item.rating"></app-stars>
  @Input()
  rating:number = 0;
  //点击修改评分的发射变量
  @Output()
  ratingChange:EventEmitter<number> = new EventEmitter();
  //评分星级的显示控制数组
  stars:Array<any> = [];

  //设置一个只读的变量来限制星级评价的是否能够操作，这是一个输入属性在父级组件上可以传递参数
  @Input()
  readonly:boolean = true;
  constructor() { }

  ngOnInit() {
    //初始化星级显示的数组
    for(let i=1;i<=5;i++){
        if(this.rating >= i){
          this.stars.push(true);
        }else if(this.rating < i){
          this.stars.push(false);
        }
    }
    //说明星级评价为空
    if(this.stars.length == 0){
      this.stars = [false,false,false,false,false];
    }
  }

  ngOnChanges(){
    // console.log(this.rating);
  }


  /**
   * 
   * @param index 点击的评级星星的索引值
   */
  clickStar(index:number){
    if(!this.readonly){
      //修改当前的排名定义的值
      this.rating = index + 1;
      //将对饮的start数组设置为空
      this.stars = [];
      //重新调用ngOnInit函数
      this.ngOnInit();
      //在点击修改正常的情况下将这个值获取的值发射出去
      this.ratingChange.emit(this.rating);
    }
  }
}
